<template>
  <div class="assignment-header">
    <button class="back-button" @click="$router.push('/teacher/feedback/card')">← 返回</button>
    <span class="correct_header1">已提交{{ feedback_header }}人</span>
  </div>
  <div class="satisfaction-survey">
    <div class="improvement-suggestions">
      <div class="serial">
      <div class="serial1">1</div>
      <div class="serial2">改进建议</div>
      </div>
      <p style="color: #4B5563;">(辛苦同学们一定帮老师填写这一项，老师因全力以赴以让大家收获最大，建议、问题都可，老师特别期待你改进建议) 期末给高分主要参考，越详细越好，留言给激励，实在没得写可填“无”</p>
    </div>
    <div class="satisfaction-chart">
      <div class="serial">
      <div class="serial1">2</div>
      <div class="serial2">满意度 (100满意-0不满意)</div>
      </div>
      <el-table :data="satisfactionData" style="width: 100%;">
        <el-table-column prop="option" label="选项" width="600" />
        <el-table-column prop="count" label="计数" width="300" />
        <el-table-column label="百分比">
          <template #default="scope">
            <div class="demo-progress">
              <el-progress :text-inside="true" :stroke-width="24" :percentage="scope.row.percentage" status="success" :color="customColor" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="satisfaction-chart">
      <div class="serial">
      <div class="serial1">3</div>
      <div class="serial2">听课、跟上程度（100全听懂了-0完全没听懂）</div>
      </div>
      <el-table :data="satisfactionData" style="width: 100%;">
        <el-table-column prop="option" label="选项" width="600" />
        <el-table-column prop="count" label="计数" width="300" />
        <el-table-column label="百分比">
          <template #default="scope">
            <div class="demo-progress">
              <el-progress :text-inside="true" :stroke-width="24" :percentage="scope.row.percentage" status="success" :color="customColor" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const feedback_header = ref('1');
const satisfactionData = ref([
  { option: '95-100很满意', count: 5, percentage: 50 },
  { option: '90-95满意', count: 1, percentage: 10 },
  { option: '80-90较满意', count: 1, percentage: 10 },
  { option: '60-80一般', count: 1, percentage: 10 },
  { option: '30-60不满意', count: 1, percentage: 10 },
  { option: '0-60很不满意', count: 1, percentage: 10 }
]);

const totalFeedback = 100;
const satisfactionPercentages = computed(() => satisfactionData.value.map(item => ({
  ...item,
  percentage: (item.count / totalFeedback) * 100
})));

const customColor = ref('#13227A');
</script>


<style scoped>
.assignment-header {
  display: flex;
  height: 8lvh;
  width: 100lvw;
  background-color: #13227A;
  color: white;
}

.back-button {
  background-color: transparent;
  margin-left: 1%;
  margin-top: 1lvh;
  width: 5%;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}

.back-button:hover {
  color: #d72d2d;
}

.correct_header1 {
  margin-left: 85%;
  font-size: 20px;
  font-weight: 700;
  margin-top: 1%;
}

.satisfaction-survey {
  padding: 20px;
  background-color: #ffffff;
}

.improvement-suggestions {
  margin-bottom: 20px;
  background-color: aliceblue;
}

.satisfaction-chart {
  margin-top: 20px;
}
.demo-progress .el-progress--line {
  max-width: 600px;
}

.serial{
  display: flex;
  width: 100%;
  height: 20px;
}
.serial1{
  float: left;
  color: white;
  background-color: #13227A;
  width: 20px;  
  height: 20px;
  text-align: center;
  border-radius: 50%;
}
.serial2{
  margin-left: 5px;
  font-size: 17px;
  font-weight: 700;
}
</style>